<!-- 边框配置 -->
<template>
  <div>
    <!-- style="width: 200px"  -->
    <el-form-item label="边框类型">
      <l-select 
          :options="borderOptions" 
          v-model="main.activeOption.borderValue"
          @change="handleChange"
          :clearable="false" >
        </l-select>
    </el-form-item>
    <el-form-item label="主颜色">
      <l-input-color v-model="main.activeOption.mainColor"></l-input-color>
    </el-form-item>
    <el-form-item label="副颜色">
      <l-input-color v-model="main.activeOption.subColor"></l-input-color>
    </el-form-item>
    <el-form-item label="背景色">
      <l-input-color v-model="main.activeOption.backgroundColor"></l-input-color>
    </el-form-item>
    <el-form-item label="标题名称" v-if="main.activeOption.borderValue===11">
      <el-input v-model="main.activeOption.title"></el-input>
    </el-form-item>
    <el-form-item label="标题宽度" v-if="main.activeOption.borderValue===11">
      <el-input-number v-model="main.activeOption.titleWidth" controls-position="right"></el-input-number>
    </el-form-item>
    <el-form-item label="透明度">
      <el-slider v-model="main.activeOption.opacity"></el-slider>
    </el-form-item>
    <el-form-item label="缩放">
      <el-slider v-model="main.activeOption.scale" :min="1" :max="10"></el-slider>
    </el-form-item>
    <el-form-item label="X旋转度">
      <el-slider v-model="main.activeOption.rotateX" :min="min" :max="max"></el-slider>
    </el-form-item>
    <el-form-item label="Y旋转度">
      <el-slider v-model="main.activeOption.rotateY" :min="min" :max="max"></el-slider>
    </el-form-item>
    <el-form-item label="Z旋转度">
      <el-slider v-model="main.activeOption.rotateZ" :min="min" :max="max"></el-slider>
    </el-form-item>
    <el-form-item label="动画时长(s)" v-if="main.activeOption.borderValue===8">
      <el-input-number
        v-model="main.activeOption.duration"
        controls-position="right"
      >
      </el-input-number>
    </el-form-item>
    <el-form-item label="进入动画">
      <l-select 
          :options="animateOptions" 
          v-model="main.activeOption.animateValue"
          @change="handleChangeAnimate" >
        </l-select>
    </el-form-item>
  </div>
</template>

<script>
export default {
  inject: ["main"],
  data() {
    return {
      borderOptions: [
        {label: '边框1', value: 1},
        {label: '边框2', value: 2},
        {label: '边框3', value: 3},
        {label: '边框4', value: 4},
        {label: '边框5', value: 5},
        {label: '边框6', value: 6},
        {label: '边框7', value: 7},
        {label: '边框8', value: 8},
        {label: '边框9', value: 9},
        {label: '边框10', value: 10},
        {label: '边框11', value: 11},
        {label: '边框12', value: 12},
      ],
      min: -360,
      max: 360,
      animateOptions: [
        {label: '弹跳', value: 'bounce'},
        {label: '放大缩小弹簧', value: 'bounceIn'},
        {label: '向下长距进入', value: 'fadeInDownBig'},
        {label: '向右长距进入', value: 'fadeInLeftBig'},
        {label: '向左长距进入', value: 'fadeInRightBig'},
        {label: '向上长距进入', value: 'fadeInUpBig'},
        {label: 'Y轴旋转', value: 'flip'},
        {label: '中心X轴旋转', value: 'flipInX'},
        {label: '中心Y轴旋转', value: 'flipInY'},
      ]
    }
  },
  computed: {},
  methods: {
    handleChange(val) {
      this.$set(this.main.activeOption, 'borderValue', val.value)
    },
     handleChangeAnimate(val) {
      if (val) {
        this.$set(this.main.activeOption, 'animateValue', val.value)
      } else {
        this.$set(this.main.activeOption, 'animateValue', '')
      }
    }
  }
}
</script>

<style>
</style>